<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加文章</title>
    <link rel="stylesheet" href="./others/editor.md/css/editormd.min.css">
    <link rel="stylesheet" href="./others/layui/css/layui.css">
</head>
<body>
    <!-- https://pandao.github.io/editor.md/examples/ -->
    <script src="./others/jquery/jquery-3.6.0.js"></script>
    <script src="./others/editor.md/editormd.min.js"></script>
    <script src="./others/layui/layui.js"></script>
    <script type="text/javascript">
        $(function() {
            var testEditor = editormd("test-editormd", {
                width: "90%",
                height: 640,
                markdown : "",
                path : './others/editor.md/lib/',
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为 true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为 true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为 true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为 0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/upload",
                saveHTMLToTextarea: true
     
                /*
                 上传的后台只需要返回一个 JSON 数据，结构如下：
                 {
                    success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                    message : "提示的信息，上传成功或上传失败及错误信息等。",
                    url     : "图片地址"        // 上传成功时才返回
                 }
                */
            });

            // 文章发布
            $("#release").on("click",function() {

                console.log(testEditor.getMarkdown());

            })
        });
        
    </script>

    <div class="layui-fluid">
        <div class="layui-row" style="line-height: 50px; background-color:rgb(240, 242, 245);">
            <div class="layui-col-md1 layui-col-md-offset1"><h2>新文章</h2></div>
            <div class="layui-col-md2 layui-col-md-offset8 layui-btn-group">
                <button class="layui-btn-primary layui-btn" onclick="window.history.go(-1)">返回</button>
                <button class="layui-btn layui-btn-normal" id="release">发布</button>
            </div>
        </div>
        <div class="layui-row">
            <form action="#" class="layui-form" method="POST">
                <div class="layui-form-item layui-col-md10 layui-col-md-offset1" style="line-height: 100px;">
                    <input type="text" name="title" id="title" class="layui-input"
                    placeholder="请输入文章标题">
                </div>
                <div id="layout">
                    <div id="test-editormd">
                        <textarea style="display:none;" id="content"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>

</body>
</html>